<script setup>
import {ref,onMounted} from "vue";
import axios from "axios";

const osList = ref(['mac','windows','android','linux','其他'])
const os = ref('')
const startDate = ref('null')
const endDate = ref('null')
const conf1 = reactive(
    {
      lineWidth: 24,
      digitalFlopStyle: {
        fill: 'pink',
      },
      textColor:'black',
      data:[],
      showValue:true

    }
)
const conf2 = reactive(
    {
      lineWidth: 24,
      digitalFlopStyle: {
        fill: 'pink',
      },
      textColor:'black',
      data:[],
      showValue:true
    }
)
const fetchData = ()=>{

  axios.get("http://localhost:5566/os_view/"+startDate.value.toString()+"/"+endDate.value.toString()).then(res=>{
  let resp = res.data
  conf1.data = resp.data.click
  conf2.data = resp.data.expose

})}
onMounted(()=>{
  fetchData()
})

</script>

<template>
  <div  class="tw-w-full tw-h-full">
    <el-row :gutter="10" class="tw-mt-2 tw-m-10 ">
<!--    <el-col :span="6">-->
<!--      <div>-->
<!--        <span>操作系统：</span>-->
<!--        <el-select v-model="os" >-->
<!--          <el-option v-for="item in osList" :label="item" :value="item"></el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--    </el-col>-->
    <el-col :span="6" >
      <div>
          <span>
            开始时间：
          </span>
        <el-date-picker v-model="startDate" type="datetime" value-format="YYYY-MM-DD hh:mm:ss" >

        </el-date-picker>
      </div>
    </el-col>
    <el-col :span="6" >
      <div>
          <span>
            结束时间：
          </span>
        <el-date-picker v-model="endDate" type="datetime" value-format="YYYY-MM-DD hh:mm:ss">

        </el-date-picker>
      </div>
    </el-col>
  </el-row>
    <el-row class="tw-m-2" :gutter="20">
    <el-col :span="6">
      <div>
        <el-button type="primary" @click="()=>{fetchData()}">
          确认
        </el-button>
        <el-button type="success">重置</el-button>
      </div>

    </el-col>
  </el-row>
  </div>
  <div class="tw-w-full tw-h-full tw-p-10">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="tw-flex tw-justify-center">
          <template #header>
            <div class="tw-text-2xl">
              操作系统点击统计
            </div>
          </template>
          <dv-active-ring-chart :config="conf1" style="width:300px;height:300px;" class="!tw-font-black"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="tw-flex tw-justify-center">
          <template #header>
            <div class="tw-text-2xl">
              操作系统曝光统计
            </div>
          </template>
          <dv-active-ring-chart :config="conf2" style="width:300px;height:300px;" class="!tw-font-black"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="tw-mt-3">
      <el-col :span="12">
        <el-card class="tw-flex tw-justify-center">
          <template #header>
            <div class="tw-text-2xl">
              操作系统点击统计
            </div>
          </template>
          <dv-conical-column-chart :config="conf1" style="width:300px;height:300px;" class="!tw-font-black"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="tw-flex tw-justify-center">
          <template #header>
            <div class="tw-text-2xl">
              操作系统曝光统计
            </div>
          </template>
          <dv-conical-column-chart :config="conf2" style="width:300px;height:300px;" class="!tw-font-black"/>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped lang="scss">

</style>